<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Register</title>
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/main/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/main/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/main/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/main/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<%-- 
    Java Script
    --%>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="resources/main/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.validate.min.js"></script>
<style type="text/css">
label.error {
	font-weight: bold;
	color: red;
	padding: 2px 8px;
	margin-top: 2px;
}
</style>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%; margin-left: 10px">
						<div class="module">
							<div class="">
								<input type="hidden" id="messageReturn" value="${Success}" />
								<div id="dialog-message" title=""
									style="font-size: 16px; display: none;">
									<p>
										<span class="ui-icon ui-icon-circle-check"
											style="float: left; margin: 0 7px 50px 0;"></span> ${Success}
									</p>
								</div>
								<form class="form-vertical" name="registerForm"
									id="registrationForm" action="createNewAccountzz.html"
									method="post">
									<div class="module-head">
										<h3>User Registration</h3>
									</div>

									<div class="module-body">
										<div style="display: block">
											<div class="" style="width: 220px; float: left;">
												<label for="">LoginId: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" name="LoginId"
														id="LoginId" placeholder="Login Id" />
												</div>

											</div>

											<div class=""
												style="width: 220px; float: left; padding-left: 40px;">
												<label for="">ID Card Number: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" name="IdCardNumber"
														id="IdCardNumber" placeholder="ID Card Number">
												</div>

											</div>
										</div>

										<br> <br> <br> <br>
										<div style="display: block">
											<div class="" style="width: 220px; float: left">
												<label for="">First Name: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="firstName"
														name="firstName" placeholder="First Name">
												</div>

											</div>
											<div class=""
												style="width: 220px; float: left; padding-left: 40px">
												<label for="">Midle Name: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="middleName"
														name="middleName" placeholder="Midle Name">
												</div>

											</div>
											<div class=""
												style="width: 220px; float: left; padding-left: 40px">
												<label for="">Last Name: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="lastName"
														name="lastName" placeholder="Last Name">
												</div>

											</div>
										</div>
										<br> <br> <br> <br>
										<div style="display: block">
											<div class="" style="width: 220px; float: left;">
												<label for="">Phone:</label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="phone1" name="phone1"
														placeholder="Phone Number 1">
												</div>

												<div class="controls row-fluid">
													<input class="span12" type="text" id="phone2" name="phone2"
														placeholder="Phone Number 2">
												</div>
											</div>
											<div class=""
												style="width: 300px; float: left; padding-left: 40px;">
												<label for="">Address: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" name="address1"
														id="address1" placeholder="Address 1">
												</div>

												<div class="controls row-fluid">
													<input class="span12" type="text" name="address2"
														id="address2" placeholder="Address 2">
												</div>

											</div>
										</div>
										<br> <br> <br> <br> <br> <br>
										<div style="display: block">
											<div class="" style="width: 220px; float: left">
												<label for="">Email: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" name="email1"
														id="email1" placeholder="Email 1">
												</div>
												<div class="controls row-fluid">
													<input class="span12" type="text" name="email2"
														id="email2" placeholder="Email 2">

												</div>
											</div>
											<div class="control-group"
												style="float: left; padding-left: 40px">
												<label class="control-label" for="basicinput">Role:</label>
												<select tabindex="1" name="role" id="role"
													data-placeholder="Select here.." class="span8"
													style="width: 220px;">
													<c:choose>
														<c:when test="${role == 1}">
															<option value="">Choose type</option>
															<option value="2">User Admin</option>
															<option value="3">User Support</option>
														</c:when>
														<c:otherwise>
															<option value="">Choose type</option>
															<option value="4">Account Admin</option>
															<option value="5">Account Support</option>
															<option value="6">Report Support</option>
														</c:otherwise>
													</c:choose>
												</select>

											</div>
										</div>
									</div>
									<br>
									<div class="module-foot"
										style="position: relative; margin-top: 100px">
										<div class="">
											<div class="controls clearfix">
												<button type="submit" class="btn btn-primary pull-left"
													style="margin-left: 15px;" id="btnRegister">Register</button>
												<button type="reset" class="btn btn-primary pull-left"
													style="margin-left: 15px;">Clear</button>
											</div>
										</div>
									</div>
								</form>
								<c:if test="${validate != null}">
									<div class="alert alert-danger" id="messagePanel"
										style="margin-left: 15px; margin-right: 15px; margin-top: 15px;">${validate}</div>
								</c:if>
							</div>
						</div>
					</div>
					<!--/.content-->

				</div>
				<!--/.span9-->
			</div>
		</div>
		<!--/.container-->
	</div>
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
</body>
<script type="text/javascript">
	var message = $('#messageReturn').val();
	if (message != '') {
		$(function() {
			$("#dialog-message").dialog({
				modal : true,
				width : 600,
				height : 'auto',
				fluid : true, //new option
				resizable : false,
				buttons : {
					Ok : function() {
						$(this).dialog("close");
					}
				}
			});
		});
	}

	<!--  /*  @author:Tran Son Hoang: action---List name for each input...
	LoginId,IdCardNumber,firstName,middleName,lastName,
		phone1,phone2,address1,address2,email1,email2,role. */ -->
	$('#').validate(
			{
				rules : {
					LoginId : {
						required : true,
					},
					IdCardNumber:{
						required : true,
						number : true,
						rangelength : [ 9, 12 ]
					},
					firstName:{
						required : true,
						rangelength : [ 0, 20 ]
					},
					middleName:{
						required : true,
						rangelength : [ 0, 20 ]
					},
					lastName:{
						required : true,
						rangelength : [ 0, 20 ]
					},
					phone1:{
						required : true,
						number : true,
						rangelength : [ 9, 12 ]
					},
					phone2:{
						required : true,
						number : true,
						rangelength : [ 9, 12 ]
					},
					address1:{
						required : true,
					},
					address2:{
						required : true,
					},
					email1:{
						required : true,
						email : true,
					},
					email2:{
						required : true,
						email : true,
					},
					role:{
						required : true,
					}
				},
				messages : {
					LoginId : {
						required : "What's your LoginId?",
					},
					IdCardNumber:{
						required : "What's your ID Card Number?",
						number : "Please enter valid number!",
						rangelength : "Invalid ID, use [9 - 12] digit number"
					},
					firstName:{
						required : "What's your firstName?",
						rangelength : "Too long, Please input less than 20 letters"
					},
					middleName:{
						required : "What's your middleName?",
						rangelength : "Too long, Please input less than 20 letters"
					},
					lastName:{
						required : "What's your lastName?",
						rangelength : "Too long, Please input less than 20 letters"
					},
					phone1:{
						required : "What's your Phone Number?",
						number : "Invalid Phone number",
						rangelength : "Invalid Phone, use [9 - 12] digit number"
					},
					phone2:{
						required : "What's your Phone Number?",
						number : "Invalid Phone number",
						rangelength : "Invalid Phone, use [9 - 12] digit number"
					},
					address1:{
						required : "What's your Address?"
					},
					address2:{
						required : "What's your Address?"
					},
					email1:{
						required : "What's your Email?",
						email : "Invalid email! Ex: James@csc.com"
					},
					email2:{
						required : "What's your Email?",
						email : "Invalid email! Ex: James@csc.com"
					},
					role:{
						required : "What's your role?",
					}
				},
				highlight : function(element) {
					$(element).closest('.field').removeClass('success')
							.addClass('error');
				},
				success : function(element) {
					element.text('').addClass('valid').closest('.field')
							.removeClass('error').addClass('success');
				}
	});
</script>
</html>
